<template>
	<view>
		<!-- 		<u-subsection bgColor="#ffffff" :list="list" :current="currents" @change="sectionChange"
			fontSize="25"></u-subsection> -->
		<view class="fd">
			<view @click="sectionChange(index)" :class="[currents==index?'sizecss':'li']" v-for="(item,index) in list">
				{{item}}
			</view>
		</view>
		<view class="photo">
			<image src="../../static/image/order.png" mode=""></image>

		</view>
		<view class="text-all">
			<view class="text-top">
				<text>~暂无相关订单~</text>
			</view>
			<view class="text-bottom">
				<text>拨打电话可第一时间安排上门服务</text>
			</view>
		</view>
		<view class="btn">
			<view class="home" @click="onBackHome">
				返回首页
			</view>
			<view class="phone" @click="onTransferFun">
				电话预约
			</view>
		</view>
		<movable />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['所有订单', '待付款', '进行中', '已完成', '已取消'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				currents: 0
			}
		},
		onLoad: function(option) {
			let that = this;
			const item = JSON.parse(decodeURIComponent(option.data));
			console.log(item);
			that.currents = item.index - 1;
		},
		methods: {
			sectionChange(index) {
				this.currents = index;
			},
			onBackHome() {
				uni.switchTab({
					url: '../index/index'
				});
			},
			onTransferFun() {
				// this.show = true;
				uni.makePhoneCall({
					phoneNumber: '400-6933-110'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fd {
		height: 70rpx;
		display: flex;
		align-items: center;

	}

	.li {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #d8d8d8;
	}

	.sizecss {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1D88FD;
		border-bottom: 1px solid  #1D88FD;
	}

	.btn {
		display: flex;
		width: 100%;

		.home {
			width: 50%;
			background-color: #CCE6FF;
			color: #3378FD;
			margin: 50rpx;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
		}

		.phone {
			width: 50%;
			background-color: #1D88FD;
			color: #FFFFFF;
			margin: 50rpx;
			margin-left: 0;
			height: 100rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
		}
	}
	.photo {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}

	.text-all {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.text-bottom {
			color: #899AA3;
			margin-top: 20rpx;
		}
	}
</style>